<template>
  <!-- 通过手机验证身份 -->
  <div class="form">
    <zx-form-group :title="$t('MOBILE_LABEL')">
      <zx-input :place="$t('OLD_MOBILE')" :rules="rules.phone" disabled="" ref="phone" type="text" v-model="phoneForm.phone">
        <span @click="getCode(phoneForm.phone,'phone',$t('GET_CODE'),$event,'phoneCodeBool')" class="input-text" slot="text">
          {{'GET_CODE'|t}}
        </span>
      </zx-input>
    </zx-form-group>
    <zx-form-group :title="$t('CODE_LABEL')">
      <zx-input :place="$t('CODE_PLACE')" :rules="rules.code" ref="phone_code" v-model="phoneForm.phone_code">
      </zx-input>
    </zx-form-group>
    <zx-form-group>
      <input :value="$t('NEXT_STEP')" @click="nextStep('phoneForm')" class="submit-btn mt-20 green-btn radius" type="button" />
    </zx-form-group>
  </div>
</template>
<script>
  import { Form, Func, Auth, Rules } from '@/providers';
  import { User, UserInfo } from '@/services';
  export default {
    name: 'identity-through-mobile',
    data() {
      return {
        phoneCodeBool: false,
        phoneForm: {
          phone: Auth.getItem('phone'),
          phone_code: ''
        },
        rules: Rules
      };
    },
    methods: {
      // 获取验证码
      getCode(val, type, innerText, event, clickBool) {
        if (this[clickBool]) { return false; };
        if (!Form.validItem(this, type)) { return; };
        this[clickBool] = true;
        if (type == 'phone') {
          Form.SendMobile(val, event.target, clickBool, innerText);
        } else {
          Form.SentMail(val, event.target, clickBool, innerText);
        }
      },
      // 下一步
      async nextStep(formName) {
        if (!Form.validataForm(this, formName)) {
          return false;
        };
        let _parmas = this[formName];
        try {
          let res = await User.ChangeEmailValidata({
            token: Auth.getItem('token'),
            code: formName == 'phoneForm' ? _parmas.phone_code : _parmas.code,
            type: formName == 'phoneForm' ? 1 : 2
          });
          this.$emit('nextStep');
        } catch (error) {
          console.log(error);
        }
      }
    }
  };
</script>